<script setup lang="ts" name="MovingX">
const x: any = ref('')

const emits = defineEmits(['change'])

onMounted(() => {
  document.addEventListener('mouseup', mouseUp)
})

onBeforeUnmount(() => {
  document.removeEventListener('mouseup', mouseUp)
})
const mouseDown = (e) => {
  document.addEventListener('mousemove', mouseMove)
  x.value = e.screenX
}
const mouseMove = (e) => {
  emits('change', x.value - e.screenX)
  x.value = e.screenX
}

const mouseUp = () => {
  x.value = ''
  document.removeEventListener('mousemove', mouseMove)
}
</script>

<template>
  <div class="x-moving" @mousedown="mouseDown">
    <slot />
  </div>
</template>

<style scoped lang="scss">
.x-moving{
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: w-resize;
}
</style>
